<template>
	<div class='system-edit-role-container'>
		<el-dialog title='修改角色' v-model='isShowDialog' width='769px'>
			<el-form :model='ruleForm' size='default' label-width='90px'>
				<el-row :gutter='35'>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='角色名称'>
							<el-input v-model='ruleForm.name' placeholder='请输入角色名称' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='角色标识'>
							<template #label>
								<el-tooltip effect='dark' content='用于 `router/route.ts` meta.roles' placement='top-start'>
									<span>角色标识</span>
								</el-tooltip>
							</template>
							<el-input v-model='ruleForm.code' placeholder='请输入角色标识' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='排序'>
							<el-input-number v-model='ruleForm.sort' :min='0' :max='999' controls-position='right' placeholder='请输入排序'
															 class='w100' />
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='角色状态'>
							<el-switch v-model='ruleForm.status' inline-prompt active-text='启' inactive-text='禁'></el-switch>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='24' :md='24' :lg='24' :xl='24' class='mb20'>
						<el-form-item label='角色描述'>
							<el-input v-model='ruleForm.describes' type='textarea' placeholder='请输入角色描述' maxlength='150'></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='24' :md='24' :lg='24' :xl='24' class='mb20'>
						<el-form-item label='菜单权限'>
							<el-tree :data='menuData' :props='menuProps' :default-checked-keys='[112, 113]' node-key='id'
											 show-checkbox class='menu-data-tree' ref='menuTree' @check='onCheckTree' />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class='dialog-footer'>
					<el-button @click='onCancel' size='default'>取 消</el-button>
					<el-button type='primary' @click='onSubmit' size='default'>修 改</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang='ts'>
import { reactive, toRefs, defineComponent, getCurrentInstance } from 'vue';
import { useMenuApi } from '/@/api/menu';
import { i18n } from '/@/i18n';
import { useRoleApi } from '/@/api/role';

// 定义接口来定义对象的类型
interface MenuDataTree {
	id: number;
	title: string;
	children?: MenuDataTree[];
}

interface RoleState {
	isShowDialog: boolean;
	ruleForm: {
		id: number,
		name: string;
		code: string;
		describes: string;
		sort: number | string;
		status: boolean;
		menuIdList: Array<number>;
	};
	menuData: Array<MenuDataTree>;
	menuProps: {
		children: string;
		label: string;
	};
}

export default defineComponent({
	name: 'systemEditRole',
	setup() {
		const { proxy } = <any>getCurrentInstance();
		const state = reactive<RoleState>({
			isShowDialog: false,
			ruleForm: {
				id: 0,
				name: '', // 角色名称
				code: '', // 角色标识
				describes: '', // 角色描述
				sort: '',
				status: false,
				menuIdList: [],
			},
			menuData: [],
			menuProps: {
				children: 'children',
				label: 'title',
			},
		});
		// 打开弹窗
		const openDialog = async (row: any) => {
			state.ruleForm = row;
			state.isShowDialog = true;
			await getMenuData();
			const checkMenuIdList = await useRoleApi().getMenuByRoleId({ 'roleId': row.id }) as any;
			//  先清空选中状态
			state.ruleForm.menuIdList = checkMenuIdList;
			proxy.$refs.menuTree.setCheckedKeys([]);
			checkMenuIdList.forEach(i => {
				// 根据id 拿到 Tree 组件中的node的所有信息
				let node = 	proxy.$refs.menuTree.getNode(i);
				// node.isLeaf：判断当前节点是否为子节点
				if (node.isLeaf) {
					//如果是子节点，就把状态设置成选中
					proxy.$refs.menuTree.setChecked(node, true);
				} else {

				}
			});
			console.log(checkMenuIdList);
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = async () => {
			let data = {
				id: state.ruleForm.id,
				name: state.ruleForm.name,
				code: state.ruleForm.code,
				describes: state.ruleForm.describes,
				sort: state.ruleForm.sort,
				status: state.ruleForm.status,
				menuIdList: state.ruleForm.menuIdList,
			};
			await useRoleApi().edit(data);
			closeDialog();
		};
		// 获取菜单结构数据
		const getMenuData = async () => {
			const response = await useMenuApi().getMenu() as any;
			state.menuData = getI18nMenuData(response);
		};
		const getI18nMenuData = (datas: any) => {
			const arr: any = [];
			datas.map((val: any) => {
				val['title'] = i18n.global.t(val.title);
				arr.push({ ...val });
				if (val.children) getI18nMenuData(val.children);
			});
			return arr;
		};
		// 节点选中状态发生变化时的回调
		const onCheckTree = () => {
			// 获取选中的子节点
			let checkedKeys = proxy.$refs.menuTree.getCheckedKeys();
			// 获取选中的父节点
			let hafCheckedKeys = proxy.$refs.menuTree.getHalfCheckedKeys();
			// 合并
			let functionIdList = checkedKeys.concat(hafCheckedKeys);
			state.ruleForm.menuIdList = functionIdList;
			console.log(functionIdList);
		};
		return {
			onCheckTree,
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang='scss'>
.system-edit-role-container {
	.menu-data-tree {
		border: var(--el-input-border, var(--el-border-base));
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}
</style>
